<template>
  <PageLayout full :page-style="pageStyle" safe-area="body">
    <template #header>
      <HeaderLayout show-back :header-style="headerStyle">
        <view>{{ $t('Search.Navigate.Title') }}</view>
      </HeaderLayout>
    </template>
    <view class="container">
      <!-- 搜索框 -->
      <view class="search-div">
        <view class="search-box">
          <view class="search-input">
            <input
              class="input"
              type="text"
              confirm-type="search"
              :placeholder="hotWords"
              :value="searchValue"
              :focus="searchFocus"
              @input="fuzzySearch"
              @confirm="confirmSearch(searchValue)"
              @focus="changeFocus"
              @blur="changeBlur"
            />
            <image v-show="!searchFocus" class="search-icon" src="/static/Search.png"></image>
            <view v-show="searchFocus" class="search-img-box" @click="clearSearchValue">
              <image class="clear-icon" :src="'/static/NoticeDissmissDark.png'"></image>
            </view>
          </view>
          <view v-show="searchFocus" class="search-text" @click="confirmSearch(searchValue)">
            {{ $t('Search.Submit.Button.Text') }}
          </view>
        </view>
      </view>

      <!-- 搜索结果为空 -->
      <block v-if="searchResultEmpty && !isBrandEmpty">
        <view class="search-empty" v-if="searchResultEmpty">
          {{ $t('Search.SearchResult.Empty.Text') }}
        </view>
      </block>

      <!-- 未搜索 -->
      <block>
        <view class="no-search">
          <!-- 搜索历史 -->
          <view class="search-history" v-if="!searchValue && searchHistoryList.length > 0">
            <view class="box-header">
              <view class="box-label">{{ $t('Search.SearchHistory.Lable.Text') }}</view>
              <image
                class="delete-icon"
                mode="aspectFit"
                :src="'/static/Delete.png'"
                @click="deleteAllSearchHistory"
              ></image>
            </view>
            <view class="history-list">
              <view
                class="history"
                v-for="(item, index) in searchHistoryList"
                :key="index"
                @click="confirmSearch(item, 'keyWords')"
                >{{ item }}</view
              >
            </view>
          </view>
          <!-- 大家都在搜 -->
          <view
            class="common-search"
            v-if="
              (!searchValue || (showSearchResult && searchResultEmpty && !isBrandEmpty)) && hotWordsArray.length > 0
            "
          >
            <view class="box-header">
              <view class="box-label">{{ $t('Search.PeopleSearch.Lable.Text') }}</view>
            </view>
            <view class="common-list">
              <view
                class="common"
                v-for="(item, index) in hotWordsArray"
                :key="index"
                @click="confirmSearch(item, 'keyWords')"
              >
                {{ item }}</view
              >
            </view>
          </view>
        </view>
      </block>

      <!-- 搜索中 -->
      <block v-if="searchValue && !showSearchResult">
        <view class="searching">
          <view class="serach-layer">
            <view class="fuzzy-box">
              <view
                class="layer-box"
                v-for="(item, index) in fuzzyList"
                :key="index"
                @click="
                  item.type === 'rows'
                    ? confirmSearch(item.value, 'keyWords')
                    : jumpOtherApp(item.jumpLink as string, '', item)
                "
              >
                <image class="search-icon" src="/static/Search.png"></image>
                <view class="fuzzy-value">
                  <text class="fuzzyPrefix" v-if="item.prefix">{{ item.prefix }}</text>
                  <text class="fuzzyHighlight">{{ item.highlight }}</text>
                  <text class="fuzzySuffix" v-if="item.suffix">{{ item.suffix }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>

      <!-- 搜索结果 -->
      <block v-if="showSearchResult">
        <scroll-view id="scroll-view" class="scrow-view" scroll-y>
          <view class="search-result">
            <view class="result" :class="{ 'border-line': searchAskResult.length > 0 }">
              <view class="brand-sort" v-if="!searchResultEmpty || (searchResultEmpty && isBrandEmpty)">
                <view
                  class="brand-box"
                  v-for="(brand, index) in brandList"
                  :key="index"
                  :class="{ active: index === brandIndex }"
                  @click="changeBrand(index, brand.type)"
                >
                  <view class="brand">{{ brand.name }}</view>
                  <view class="brand-line"></view>
                </view>
              </view>

              <!-- 搜索结果为空 -->
              <view class="search-empty tab-empty" v-if="searchResultEmpty && isBrandEmpty && !isLoadingApi">{{
                $t('Search.SearchResult.Empty.Text')
              }}</view>

              <!-- 大家都在问搜索结果 -->
              <view
                v-if="searchAskResult.length > 0"
                class="result-box"
                v-for="(item, index) in searchAskResult"
                :key="index"
                @click="jumpOtherApp(item.jumpLink, item.brandId, item)"
              >
                <view class="result-name">
                  <text>{{ item.prefix }}</text>
                  <text class="fuzzyHighlight">{{ item.highlight }}</text>
                  <text>{{ item.suffix }}</text>
                </view>
                <view class="result-cont">
                  <text>{{ item.description }}</text>
                  <image class="rigth-arrow" :src="'/static/ic_right_arrow.png'"></image>
                </view>
              </view>
            </view>
            <!-- 官方商城 -->
            <view
              class="official-mall"
              v-if="salesData.length > 0"
              :class="{ marginTop: searchAskResult.length > 0, 'border-line': searchAskResult.length > 0 }"
            >
              <view class="mall-header">
                <view class="title">{{ $t('Search.OfficialMall.Lable.Text') }}</view>
                <view class="title-des"
                  >{{ $t('Search.OfficialMall.Result.Profont.Text') }}{{ searchResultTotal
                  }}{{ $t('Search.OfficialMall.Result.Suffix.Text') }}</view
                >
              </view>
              <view class="sort-cont">
                <view class="banner-box">
                  <view
                    class="banner-title"
                    v-for="(item, index) in salesData"
                    :key="index"
                    :class="{ active: salseIndex === index }"
                    @click="changeBanner(index)"
                    >{{ item.categoryName }}</view
                  >
                </view>
                <view class="shop-list">
                  <view
                    class="good-box"
                    v-for="(good, index) in salesData[salseIndex].itemSaleList"
                    :key="index"
                    @click="jumpOtherApp(good.jumpLink, good.brand, good)"
                  >
                    <view class="good-cont">
                      <image class="good-img" :src="good.saleImag" mode="aspectFit"></image>
                      <view class="good">
                        <view class="good-name">
                          <text>{{ good.prefix }}</text>
                          <text class="fuzzyHighlight">{{ good.highlight }}</text>
                          <text>{{ good.suffix }}</text>
                        </view>
                        <view class="good-price">
                          <text class="price-mark">¥</text>
                          <text class="price">{{ good.marketPrice }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </block>
    </view>
  </PageLayout>
</template>
<script lang="ts">
export type FuzzyListType = {
  value: string
  prefix: string
  highlight: string
  suffix: string
  type?: string
  jumpLink?: string
}
export type SearchAskResultType = SearchAskItemType & FuzzyListType
export type SeatchSalesResultType = {
  sort: number
  categoryName: string
  categoryId: string
  itemSaleList: (SearchSalesItemType & FuzzyListType)[]
}
export type JumpApplianceType = {
  haId: string
  vib: string
  type: string
  brand: string
}
export type AskFuzzyType = {
  title: string
  jumpLink: string
}
</script>
<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'

import { onLoad, onShow } from '@dcloudio/uni-app'
import {
  getFuzzyList,
  getSearchContent,
  type SearchAskItemType,
  type SearchSalesItemType,
  type SearchSalesType,
} from '@/api/content'
import { safeTrack } from '@/dataReport/dataReportUtil'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import { actionDebounce, jumpMP, showLoading, toPage } from '@/utils/mpHelper'
import { getSimpleApplianceList, type SimpleDeviceModel } from '@/api/afterService'
import { useI18n } from 'vue-i18n'
import { useApplianceStore } from '@/store/appliance'

const i18n = useI18n()

const pageStyle = computed(() => {
  return { backgroundColor: showSearchResult.value && !searchResultEmpty.value ? '#f4f4f6' : '#fff' }
})
const headerStyle = {
  backgroundColor: '#fff',
}

const hotWordsArray = ref<string[]>([])
const searchValue = ref('')
const searchFocus = ref(true)
const showSearchResult = ref(false)
const searchHistoryList = ref<string[]>([])
const fuzzyList = ref<FuzzyListType[]>([])
const searchAskResult = ref<SearchAskResultType[]>([])
const brandIndex = ref(0)
const salseIndex = ref(0)
const salesData = ref<SeatchSalesResultType[]>([])
const searchResultTotal = ref(0)
const boschAppid = ref('')
const siemensAppid = ref('')
const brandId = ref('')
const isOnlyBrand = ref(false)
const isBrandEmpty = ref(false)
const isLoadingApi = ref(false)
const applianceSimpleList = ref<SimpleDeviceModel[]>([])
const hotWords = ref('如何共享家电')
const brandList = ref<{ type: string; name: string }[]>([
  { type: '', name: i18n.t('Search.SearchResult.BrandTab.All.Text') },
  { type: 'A01', name: i18n.t('Search.SearchResult.BrandTab.Bosch.Text') },
  { type: 'A02', name: i18n.t('Search.SearchResult.BrandTab.Siemens.Text') },
])

const searchResultEmpty = computed(
  () => showSearchResult.value && salesData.value.length === 0 && searchAskResult.value.length === 0
)

watch(
  () => searchValue.value,
  (value) => {
    if (!value) {
      getSearchHistoray()
    }
  }
)

onLoad((options) => {
  // 热词
  hotWords.value = decodeURIComponent(options?.hotWords)
  // 大家都在搜
  hotWordsArray.value = JSON.parse(decodeURIComponent(options?.hotWordsArray))

  getApplianceListFun()
})

onShow(() => {
  getSearchHistoray()
})

/**
 * 获取家电列表接口
 */
async function getApplianceListFun() {
  const res = await getSimpleApplianceList()
  if (res.code === 0) {
    let boshFlag = false
    let siemensFlag = false
    let applianceList = res.data || []
    applianceSimpleList.value = applianceList
    if (applianceList.length === 0) {
      brandId.value = ''
      brandList.value = [
        { type: '', name: i18n.t('Search.SearchResult.BrandTab.All.Text') },
        { type: 'A01', name: i18n.t('Search.SearchResult.BrandTab.Bosch.Text') },
        { type: 'A02', name: i18n.t('Search.SearchResult.BrandTab.Siemens.Text') },
      ]
      return
    }
    applianceList.forEach((item) => {
      if (item.brand.toUpperCase() === 'SIEMENS') {
        siemensFlag = true
      }
      if (item.brand.toUpperCase() === 'BOSCH') {
        boshFlag = true
      }
    })
    if (siemensFlag && boshFlag) {
      brandId.value = ''
      brandList.value = [
        { type: '', name: i18n.t('Search.SearchResult.BrandTab.All.Text') },
        { type: 'A01', name: i18n.t('Search.SearchResult.BrandTab.Bosch.Text') },
        { type: 'A02', name: i18n.t('Search.SearchResult.BrandTab.Siemens.Text') },
      ]
    } else if (siemensFlag) {
      brandId.value = 'A02'
      isOnlyBrand.value = true
      brandList.value = [{ type: 'A02', name: i18n.t('Search.SearchResult.BrandTab.Siemens.Text') }]
    } else if (boshFlag) {
      brandId.value = 'A01'
      isOnlyBrand.value = true
      brandList.value = [{ type: 'A01', name: i18n.t('Search.SearchResult.BrandTab.Bosch.Text') }]
    }
  }
}

/**
 * 从缓存获取搜索历史数据
 */
function getSearchHistoray() {
  searchHistoryList.value = uni.getStorageSync('searchHistoray') || []
}

/**
 * 删除所有的搜索历史
 */
function deleteAllSearchHistory() {
  uni.showModal({
    content: i18n.t('Search.ClearSearchHistory.Dialog.Content.Text'),
    confirmColor: '#408df2',
    cancelColor: '#2d3746',
    success(res) {
      if (res.confirm) {
        searchHistoryList.value = []
        uni.removeStorageSync('searchHistoray')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}

/**
 * 聚焦
 */
// const isFoucs = ref(false)
function changeFocus() {
  if (!isOnlyBrand.value) {
    brandId.value = ''
  }
  fuzzyList.value = []
  if (searchValue.value) loadfuzzyListFun(searchValue.value)
  searchFocus.value = true
  showSearchResult.value = false
  brandIndex.value = 0
  salseIndex.value = 0
}

/**
 * 失去焦点
 */
function changeBlur() {
  searchFocus.value = false
}

/**
 * 清空输入框内容
 */
function clearSearchValue() {
  if (!isOnlyBrand.value) {
    brandId.value = ''
  }
  fuzzyList.value = []
  showSearchResult.value = false
  searchValue.value = ''
}

/**
 * 模糊搜索
 * @param e
 */
function fuzzySearch(e?: Event) {
  searchValue.value = (e as unknown as WechatMiniprogram.Input).detail.value
  loadfuzzyListFun(searchValue.value)
}

/**
 * 获取模糊搜索列表
 */
async function loadfuzzyListFun(searchValue: string) {
  let params = {
    brandId: brandId.value,
    queryWord: searchValue,
    pageNum: 1,
    pageSize: 500,
  }
  const res = await getFuzzyList(params)
  let { rows, ask } = res.data
  let rowsList = getHighlightRows(rows, searchValue)
  let askList = getHighlightAsk(ask, searchValue)
  fuzzyList.value = askList.concat(rowsList)
}

/**
 * 获取rows模糊搜索高亮显示数据
 * @param sourceList
 * @param searchValue
 */
function getHighlightRows(sourceList: string[], searchValue: string) {
  const searchText = searchValue.toUpperCase()
  const searchTextSize = searchText.length
  if (!sourceList || sourceList.length === 0) return []
  return sourceList.reduce((targetList: FuzzyListType[], sourceItem: string) => {
    const sourceText = sourceItem
    const matchedIndex = sourceText.indexOf(searchText)
    if (matchedIndex !== -1) {
      const startIndex = matchedIndex
      const endIndex = matchedIndex + searchTextSize
      targetList.push({
        value: sourceText,
        prefix: sourceText.slice(0, startIndex),
        highlight: sourceText.slice(startIndex, endIndex),
        suffix: sourceText.slice(endIndex),
        type: 'rows',
      })
    } else {
      targetList.push({
        value: sourceText,
        prefix: sourceText,
        highlight: '',
        suffix: '',
        type: 'rows',
      })
    }
    return targetList
  }, [])
}

/**
 * 获取ask模糊搜索高亮显示数据
 * @param sourceList
 * @param searchValue
 */
function getHighlightAsk(sourceList: AskFuzzyType[], searchValue: string) {
  const searchText = searchValue.toUpperCase()
  const searchTextSize = searchText.length
  if (!sourceList || sourceList.length === 0) return []
  return sourceList.reduce((targetList: FuzzyListType[], sourceItem: AskFuzzyType) => {
    const sourceText = sourceItem.title
    const matchedIndex = sourceText.indexOf(searchText)
    if (matchedIndex !== -1) {
      const startIndex = matchedIndex
      const endIndex = matchedIndex + searchTextSize
      targetList.push({
        value: sourceText,
        prefix: sourceText.slice(0, startIndex),
        highlight: sourceText.slice(startIndex, endIndex),
        suffix: sourceText.slice(endIndex),
        type: 'ask',
        jumpLink: sourceItem.jumpLink,
      })
    } else {
      targetList.push({
        value: sourceText,
        prefix: sourceText,
        highlight: '',
        suffix: '',
        type: 'ask',
        jumpLink: sourceItem.jumpLink,
      })
    }
    return targetList
  }, [])
}

/**
 * 获取大家都在问搜索结果高亮显示数据
 * @param sourceList
 * @param searchValue
 */
function getHighlightAskItemRows(askItemList: SearchAskItemType[], searchValue: string) {
  const searchText = searchValue.toUpperCase()
  const searchTextSize = searchText.length
  if (!askItemList || askItemList.length === 0) return []
  return askItemList.reduce((newSearchAskResult: SearchAskResultType[], sourceItem: SearchAskItemType) => {
    const sourceText = sourceItem.title + (sourceItem.titleSuffix ? sourceItem.titleSuffix : '')
    const matchedIndex = sourceText.indexOf(searchText)
    if (matchedIndex !== -1) {
      const startIndex = matchedIndex
      const endIndex = matchedIndex + searchTextSize
      newSearchAskResult.push({
        ...sourceItem,
        value: sourceText,
        prefix: sourceText.slice(0, startIndex),
        highlight: sourceText.slice(startIndex, endIndex),
        suffix: sourceText.slice(endIndex),
      })
    } else {
      newSearchAskResult.push({
        ...sourceItem,
        value: sourceText,
        prefix: sourceText,
        highlight: '',
        suffix: '',
      })
    }
    return newSearchAskResult
  }, [])
}

/**
 * 获取大家都在问搜索结果高亮显示数据
 * @param sourceList
 * @param searchValue
 */
function getHighlightSalesRows(salesItemList: SearchSalesItemType[], searchValue: string) {
  const searchText = searchValue.toUpperCase()
  const searchTextSize = searchText.length
  if (!salesItemList || salesItemList.length === 0) return []
  return salesItemList.reduce(
    (newSearchSalesResult: (SearchSalesItemType & FuzzyListType)[], sourceItem: SearchSalesItemType) => {
      const sourceText = sourceItem.name
      const matchedIndex = sourceText.indexOf(searchText)
      if (matchedIndex !== -1) {
        const startIndex = matchedIndex
        const endIndex = matchedIndex + searchTextSize
        newSearchSalesResult.push({
          ...sourceItem,
          value: sourceText,
          prefix: sourceText.slice(0, startIndex),
          highlight: sourceText.slice(startIndex, endIndex),
          suffix: sourceText.slice(endIndex),
        })
      } else {
        newSearchSalesResult.push({
          ...sourceItem,
          value: sourceText,
          prefix: sourceText,
          highlight: '',
          suffix: '',
        })
      }
      return newSearchSalesResult
    },
    []
  )
}

/**
 * 点击搜索
 */
const confirmSearch = actionDebounce({
  call: async (value: string, type?: string) => {
    if (!value) searchValue.value = hotWords.value
    brandIndex.value = 0
    salseIndex.value = 0
    isBrandEmpty.value = false

    if (type === 'keyWords') {
      searchValue.value = value
    }

    const is_manual = type ? false : true
    safeTrack(() => {
      trackEvent('before_search', { search_words: searchValue.value, is_manual }, TrackType.ApplianceDetail)
    })

    storageHistoray(searchValue.value)
    await loadSearchContentDataFun(searchValue.value, isOnlyBrand.value ? brandId.value : '', is_manual)
  },
})

/**
 * 获取搜索结果数据
 * @param value
 */
async function loadSearchContentDataFun(value: string, brandId: string, is_manual?: boolean) {
  searchAskResult.value = []
  salesData.value = []
  isLoadingApi.value = true
  showLoading(async () => {
    salesData.value = []
    let params = {
      brandId,
      queryWord: value,
      pageNum: 1,
      pageSize: 100,
    }
    let res: any = null
    try {
      res = await getSearchContent(params)
    } catch (error) {
      res = error
    } finally {
      safeTrack(() => {
        trackEvent(
          'search',
          {
            search_words: searchValue.value,
            is_manual,
            successOrNot: res.code == 0,
            error_code: res.code,
            response_msg: res.msg,
          },
          TrackType.BusinesssScene,
          'Search.Input.Search.Button.Text'
        )
      })
    }
    if (res.code === 0) {
      searchResultTotal.value = res.data.itemSales.total
      boschAppid.value = res.data.boschAppid
      siemensAppid.value = res.data.siemensAppid

      // 大家都在问
      const askItemList = res.data.ask.items
      searchAskResult.value = getHighlightAskItemRows(askItemList, searchValue.value)
      // 商城
      const salesDataList = res.data.itemSales.salesData
      if (salesDataList.length > 0) {
        salesData.value = getSalseDataList(salesDataList)
      }

      showSearchResult.value = true
      isLoadingApi.value = false
    }
  })
}

/**
 * 初始化商城数据
 * @param salesDataList
 */
function getSalseDataList(salesDataList: SearchSalesType[]) {
  let newSalseData: SeatchSalesResultType[] = []
  salesDataList.forEach((item) => {
    newSalseData.push({
      sort: item.sort,
      categoryName: item.categoryName,
      categoryId: item.categoryId,
      itemSaleList: getHighlightSalesRows(item.itemSaleList, searchValue.value),
    })
  })
  return newSalseData
}

/**
 * 存储搜索记录至缓存
 */
function storageHistoray(value: string) {
  let searchHistoryStorage = uni.getStorageSync('searchHistoray') || []
  let index = searchHistoryStorage.findIndex((item: string) => item === value)
  if (index >= 0) {
    searchHistoryStorage.splice(index, 1)
    searchHistoryStorage.unshift(value)
  } else {
    if (searchHistoryStorage.length === 15) searchHistoryStorage.splice(searchHistoryStorage.length - 1, 1)
    searchHistoryStorage.unshift(value)
  }
  uni.setStorageSync('searchHistoray', searchHistoryStorage)
}

/**
 * 切换品牌选择
 * @param index
 */
const changeBrand = actionDebounce({
  call: async (index: number, type: string) => {
    if (index === brandIndex.value) return
    brandIndex.value = index
    salseIndex.value = 0
    brandId.value = type
    if (index !== 0) isBrandEmpty.value = true
    await loadSearchContentDataFun(searchValue.value, type)
  },
})

/**
 * 商城内容切换
 * @param index
 */
function changeBanner(index: number) {
  if (index === salseIndex.value) return
  salseIndex.value = index
}

/**
 * 跳转其它小程序或者其它页面
 */
const jumpOtherApp = actionDebounce({
  loadingText: i18n.t('Search.JumpPath.Toast.Text'),
  call: async (path: string, newBrandId?: string, item?: any) => {
    safeTrack(() => {
      trackEvent(
        'check_search_result_actionhandler',
        { search_result: JSON.stringify(item) },
        TrackType.BusinesssScene,
        'Home.Discover.Search.Result.Click'
      )
    })
    if (!path) return
    let appid = ''
    if (newBrandId === 'A01') {
      appid = boschAppid.value
      jumpMP(appid, path)
    } else if (newBrandId === 'A02') {
      appid = siemensAppid.value
      jumpMP(appid, path)
    } else {
      getJumpPath(path)
    }
  },
})

/**
 * 获取跳转的路径
 */
function getJumpPath(path: string) {
  if (
    path.indexOf('addAppliance') !== -1 ||
    path.indexOf('isVirtual') !== -1 ||
    path.indexOf('generalSetting') !== -1 ||
    path.indexOf('chooseMode') !== -1
  ) {
    toPage('/' + path)
  } else if (path.indexOf('applianceSettings') !== -1) {
    // 设置页
    let settingType = path.split('?')[1].split('=')[1]

    let newPath = `pages/appliance/${settingType}/${settingType}`
    jumpPathParams(newPath, settingType, 'setting')
  } else {
    // 家电详情页
    let arr = path.split('/')
    let newType = arr[arr.length - 1]
    jumpPathParams(path, newType, 'detail')
  }
}

/**
 * 带参数跳转页面
 */
async function jumpPathParams(path: string, newType: string, type: string) {
  if (applianceSimpleList.value.length > 0) {
    let newBrand = brandId.value === '' ? '' : brandId.value === 'A01' ? 'BOSCH' : 'SIEMENS'
    let appliance = applianceSimpleList.value.find((item) => {
      if (newBrand) {
        return item.brand === newBrand && item.type === newType
      } else {
        return item.type === newType
      }
    }) as SimpleDeviceModel

    if (!appliance) {
      noApplianceFun()
      return
    }

    // 进入到家电详情页，设置全局缓存
    try {
      const applianceStore = useApplianceStore()
      await applianceStore.loadList(true)
      applianceStore.setCurrent(appliance.haId)
    } catch (error) {
      console.error('设置进入到家电详情页缓存数据时出错', error)
    }

    toPage('/' + path, {
      haId: appliance.haId,
      vib: appliance.vib,
      brand: appliance.brand,
      type: appliance.type,
      toSetting: type === 'setting',
    })
  } else {
    noApplianceFun()
  }
}

/**
 * 没有匹配到家电时弹框提示
 */
function noApplianceFun() {
  uni.showModal({
    content: i18n.t('Search.NoAppliance.Dialog.Description.Text'),
    cancelText: i18n.t('Search.NoAppliance.Dialog.Cancle.Text'),
    confirmText: i18n.t('Search.NoAppliance.Dialog.Ok.Text'),
    confirmColor: '#408df2',
    cancelColor: '#2d3746',
    showCancel: true,
    success(res) {
      if (res.confirm) {
        jumpParing()
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}

/**
 * 跳转家电配置页
 */
const jumpParing = actionDebounce({
  call: async () => {
    toPage('/pages/pairing/chooseMode/index')
  },
})
</script>
<style scoped lang="less">
.container {
  width: 100%;
  position: relative;
  overflow: hidden;
  .fuzzyHighlight {
    color: var(--primary-color);
    opacity: 1;
  }
  .rigth-arrow {
    width: 16rpx;
    height: 28rpx;
    margin-left: 24rpx;
  }
  // 搜索框
  .search-div {
    width: 100%;
    padding: 22rpx 32rpx 0;
    background-color: #fff;
    box-sizing: border-box;
  }
  .scrow-view {
    width: 100%;
    height: 100%;
  }
  .content {
    // padding-top: 82rpx;
  }
  // 搜索结果为空
  .search-empty {
    padding: 32rpx 32rpx 22rpx;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 40rpx;
    color: #2d3746;
    opacity: 0.6;
  }
  .tab-empty {
    padding: 28rpx 0 0 !important;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-input {
      position: relative;
      flex-grow: 1;
      height: 60rpx;
      .input {
        width: 100%;
        border-bottom: 1rpx solid rgba(180, 185, 195, 1);
        letter-spacing: 1rpx;
        font-weight: 400;
        font-size: 28rpx;
        height: 60rpx;
        padding-left: 10rpx;
        padding-right: 60rpx;
        position: absolute;
        z-index: 1;
        box-sizing: border-box;
      }
      .search-img-box {
        position: absolute;
        width: 80rpx;
        height: 60rpx;
        right: 0;
        top: 0;
        z-index: 10;
      }
      .search-icon {
        width: 36rpx;
        height: 36rpx;
        position: absolute;
        top: 10rpx;
        right: 0;
      }
      .clear-icon {
        width: 36rpx;
        height: 36rpx;
        position: absolute;
        top: 14rpx;
        right: 0;
        z-index: 9;
      }
    }
    .search-text {
      width: 60rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: var(--primary-color);
      padding-left: 28rpx;
    }
  }
  // 未搜索
  .no-search {
    padding: 0 32rpx;
    .box-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .box-label {
        font-weight: 500;
        font-size: 28rpx;
        color: var(--dark-color);
      }
      .delete-icon {
        width: 36rpx;
        height: 36rpx;
      }
    }
    // 搜索历史
    .search-history {
      margin-top: 32rpx;
      .history-list {
        margin-top: 14rpx;
        .history {
          display: inline-block;
          padding: 8rpx 24rpx;
          background-color: #e9e9ed;
          margin-right: 16rpx;
          margin-bottom: 14rpx;
          font-weight: 400;
          font-size: 26rpx;
          color: var(--dark-color);
          opacity: 0.6;
        }
      }
    }
    // 大家都在搜索
    .common-search {
      margin-top: 26rpx;
      .common-list {
        margin-top: 16rpx;
        display: grid;
        grid-column: 2;
        grid-template-columns: repeat(2, 1fr);
        gap: 24rpx;
        .common {
          display: flex;
          font-weight: 400;
          font-size: 26rpx;
          color: var(--dark-color);
        }
      }
    }
  }
  // 搜索中
  .searching {
    width: 100%;
    height: 100%;
    padding: 0 32rpx;
    overflow: auto;
    .serach-layer {
      width: 716rpx;
      background-color: #fff;
      top: 24rpx;
      z-index: 5;
      .fuzzy-box {
        position: relative;
        width: 100%;
        height: 100%;
        padding-right: 32rpx;
        box-sizing: border-box;
        .layer-box {
          color: var(--dark-color);
          font-weight: 400;
          font-size: 28rpx;
          line-height: 40rpx;
          padding: 16rpx 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .search-icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 8rpx;
          }
          .fuzzy-value {
            width: calc(100% - 44rpx);
            word-wrap: break-word;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .fuzzy-no-content {
        width: 100%;
        height: 100vh;
      }
    }
  }
  // 搜索结果
  .search-result {
    height: 100%;

    .result {
      background-color: #fff;
      padding-left: 32rpx;

      &.border-line {
        border-bottom: 1rpx solid #e9e9ed;
      }
      .brand-sort {
        display: flex;
        .brand-box {
          margin-right: 64rpx;
          margin-top: 40rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          .brand {
            font-weight: 400;
            font-size: 32rpx;
            color: var(--dark-color);
            opacity: 0.6;
            padding-bottom: 8rpx;
          }
          .brand-line {
            width: 24rpx;
            height: 8rpx;
            background-color: transparent;
          }
          &.active {
            .brand {
              font-weight: 500;
              opacity: 1;
            }
            .brand-line {
              background-color: var(--dark-color);
            }
          }
        }
      }
      .result-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 88rpx;
        border-bottom: 1rpx solid #e2e2e2;
        padding-right: 32rpx;
        .result-name {
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(var(--dark-vector), 0.9);
          line-height: 44rpx;
        }
        .result-cont {
          min-width: 140rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          text {
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(var(--dark-vector), 0.6);
          }
        }
      }
      .result-box:last-child {
        border-bottom: none;
      }
    }

    // 官方商城
    .official-mall {
      background-color: #fff;
      padding-left: 32rpx;
      &.marginTop {
        margin-top: 16rpx;
      }
      &.border-line {
        border-top: 1rpx solid #e9e9ed;
      }
      .mall-header {
        display: flex;
        align-items: baseline;
        border-bottom: 1rpx solid #e2e2e2;
        .title {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 80rpx;
          padding-right: 16rpx;
        }
        .title-des {
          font-weight: 400;
          font-size: 24rpx;
          color: rgba(var(--dark-vector), 0.6);
        }
      }
      .sort-cont {
        .banner-box {
          padding: 16rpx 0;
          display: flex;
          .banner-title {
            width: 96rpx;
            height: 48rpx;
            text-align: center;
            line-height: 48rpx;
            background-color: #e9e9ed;
            font-weight: 400;
            font-size: 26rpx;
            color: var(--dark-color);
            opacity: 0.6;
            margin-right: 16rpx;
            box-sizing: border-box;
            &.active {
              background-color: var(--primary-color);
              color: #ffffff;
              opacity: 1;
            }
          }
        }
        .shop-list {
          .good-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24rpx 32rpx 24rpx 0;
            border-bottom: 1rpx solid #e2e2e2;
            .good-cont {
              display: flex;
              width: calc(100% - 40rpx);
              .good-img {
                width: 132rpx;
                height: 132rpx;
                background-color: #e2e2e2;
                margin-right: 24rpx;
              }
              .good {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: calc(100% - 165rpx);
                .good-name {
                  font-weight: 500;
                  font-size: 32rpx;
                  color: var(--dark-color);
                }
                .good-price {
                  line-height: 44rpx;
                  font-weight: 600;
                  color: var(--dark-color);
                  .price-mark {
                    font-size: 20rpx;
                    margin-right: 8rpx;
                  }
                  .price {
                    font-size: 32rpx;
                  }
                }
              }
            }
          }
          .good-box:last-child {
            border: none;
          }
        }
      }
    }
  }
}
</style>
